<template>
  <div class="top">
    
    <el-container>
      <el-aside width="auto" class="header-logo tap">
        <span>
          <img src="../../assets/logo.png" alt style="width:38px;height:38px" />
        </span>
        <span style="margin-left:10px ;margin-bottom:2px; ;font-size:36px; ">
          <h1 style="color:white">工单管理系统</h1>
        </span>

      </el-aside>
      <el-aside width="auto" class="header-logo tap">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <el-avatar :src="require('../../assets/head2.jpg')" :size="50"></el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown">
            <span @click="updatePassword()">
              <el-dropdown-item>修改密码</el-dropdown-item>
            </span>
            <span @click="exit()">
              <el-dropdown-item>退出登录</el-dropdown-item>
            </span>
          </el-dropdown-menu>
        </el-dropdown>
      </el-aside>
    </el-container>
    <div>
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
        
        <div class="app-container common-list-page">
          <el-form
            :model="resetForm"
            :rules="resetFormRules"
            ref="resetForm"
            status-icon
            label-width="100px"
          >
            <el-form-item label="旧密码：" prop="oldPassword">
              <el-input type="password" v-model="resetForm.oldPassword" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="newPassword">
              <el-input type="password" v-model="resetForm.newPassword" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="newPassword1">
              <el-input type="password" v-model="resetForm.newPassword1" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updatePass()">确认修改</el-button>
              <el-button type="primary" @click="resetForms()">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error("密码长度为6-18位"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      formLabelWidth: "120px",
      dialogFormVisible: false,
      resetForm: {
        oldPassword: "",
        newPassword: "",
        newPassword1: "",
        username: this.$store.state.user.username,
      },

      resetFormRules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        newPassword1: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    exit() {
      this.$axios.get("/user/logout").then((resp) => {
        if (resp.data.code === 200) {
          localStorage.clear();
          this.$router.push("/");
        }
      });
    },

    updatePassword() {
      this.$axios({
        method: "get",
        params: {
          username: this.$store.state.user.username,
          powername: "power:updatePass",
        },
        url: "/user/UserPower",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.dialogFormVisible = true;
          } else {
            this.$message.success(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updatePass() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            params: {
              username: this.resetForm.username,
              oldpassword: this.resetForm.oldPassword,
              newpassword: this.resetForm.newPassword1,
            },
            url: "/user/updatePass",
          })
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                localStorage.removeItem("user");
                localStorage.removeItem("Authorization");
                localStorage.removeItem("roleId");
                this.$message.success("修改成功,3秒后跳转到登录页！");
                setTimeout(() => {
                  this.$router.push({
                    name: "login",
                  }); //调用跳转到登陆页的方法
                }, 3000);
              }else{
                this.$message.error(res.data.message)

              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          this.$message.error("修改失败");

          return false;
        }
      });
    },
    resetForms() {
      this.$refs.resetForm.resetFields();
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style scoped>
.el-aside {
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  display: flex;

  align-items: center;
  padding: 0 20px;
}
section .el-container {
  display: flex;
  margin-top: 15px;
  margin-left: -11px;
  justify-content: space-between;
  margin-right: 10px;
  width: 100%;
}
.logo {
  width: 200px;
}
.el-form {
  width: 60%;
  margin: 50px auto 0;
  text-align: center;
}
button {
  margin: 20px 0 0;
}
.headerLogo,
.logo {
  cursor: pointer;
}
.el-dropdown {
  vertical-align: top;
  cursor: pointer;
  margin-top: 10px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
h1 {
  color: rgb(23, 1, 32);
  font-family: Georgia, "Times New Roman", Times, serif;
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 22px;
}
.top {
  height: 95px;
 
  margin-top: -20px;
 
  
width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style
>
